<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="__CDN__/assets/css/addPage.css">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div align="center">
    <form enctype="multipart/form-data" name="form1" id="add-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <table width="99%" cellpadding="0" class="Table1" bordercolor="#bfd8e0" border="0" cellspacing="0">
            <tbody>
            <tr>
                <td class="FontWeight" align="right" height="50">名　　称：
                    <input id="c-title" class="Input" name="row[title]" type="text">
                </td>
                <!--<td style="display:none;" class="FontWeight" align="left" height="50">&nbsp;类　　型：-->
                    <!--<select name="selleixing">-->
                        <!--<option value="1">私有</option>-->
                        <!--<option value="2">公有</option>-->
                    <!--</select>-->
                <!--</td>-->
                <td class="FontWeight" align="center" height="50">报价上限：
                    <input id="c-money_max" class="Input" name="row[money_max]" type="text">
                </td>
                <td class="FontWeight" align="left" height="50">&nbsp;&nbsp;报价下限：
                    <input id="c-money_min" class="Input" name="row[money_min]" type="text">
                </td>
            </tr>
            </tbody>
        </table>

        <table id="SignFrame" width="100%" border="0" cellspacing="0" cellpadding="0" class="tab">
            <tbody>
            <tr id="trHeader">
                <th align="center">序号</th>
                <th align="center">时间</th>
                <th align="center">是否开启</th>
                <th align="center">预算（元）</th>
                <th align="center">排名上限（名）</th>
                <th align="center">排名下限（名）</th>
                <th align="center">操作</th>
            </tr>
            </tbody>
        </table>
        <div align="center" style="width:90%; height:40px"><br>
            <input class="FontWeight" type="button" name="Submit" value="增加一行" style="height:30px; width:90px"
                   onclick="AddSignRow()">
            &nbsp;
            <button type="submit" class="FontWeight" name="btnOk"  style="height:30px; width:90px">{:__('OK')}</button>
            <input onclick="return_btn();" class="FontWeight" type="button" value="返回" style="height:30px; width:90px">
        </div>
        <input name="txtTRLastIndex" type="hidden" id="txtTRLastIndex" value="3">
        <input name="hidOk" type="hidden" value="">
    </form>
</div>

<script>

    // 增加一行
    function AddSignRow() {
        let i = $("#SignFrame > tbody > tr").length

        let html = ''
        html += `
          <tr id="SignItem${i}">
        <td>
          <div align="center" style="height:25px">${i}</div>
        </td>
        <td>
          <div align="center"><select style="width:60px" name="row[selHour][]" id="selHour${i}">
            ${renderOption(24, 0)}
          </select>时<select style="width:60px" name="row[selMin][]" id="selMin${i}">
            ${renderOption(60, 0)}
          </select>分
          </div>
        </td>
        <td>
          <div align="center"><select name="row[isOpen][]" id="isOpen${i}">
            <option value="0">无操作</option>
            <option value="1">开启</option>
            <option value="2">关闭</option>
          </select></div>
        </td>
        <td>
          <div align="center"><input name="row[YuSuan][]" id="YuSuan${i}" type="text" size="6" maxlength="5"></div>
        </td>
        <td>
          <div align="center">
            <select style="width:60px" name="row[PaiMingShang][]" id="PaiMingShang${i}">
             ${renderOption(19, 1)}
            </select>
          </div>
        </td>
        <td>
          <div align="center">
            <select style="width:60px" name="row[PaiMingXia][]" id="PaiMingXia${i}">
              ${renderOption(19, 1)}
            </select>
          </div>
        </td>
        <td>
          <div align="center"><a href="javascript:;" onclick="DeleteSignRow('${i}')">删除</a></div>
        </td>
      </tr>
    `

        $('#SignFrame tbody').append(html)
    }

    // 绘制option
    function renderOption(len, first) {
        let html = ''
        let arr = Array.from({length: len}).map((item, index) => {
            return index
        })
        for (let i of arr) {
            let str = i.toString()
            if (first === 1 && str === '0') {
                continue
            }
            if (str.length <= 1) {
                str = '0' + str;
            }
            html += `
      <option>${str}</option>
      `
        }
        return html
    }

    // 删除一行
    function DeleteSignRow(rowIndex) {
        $("#SignItem" + rowIndex).remove();
        sortTrNumber()
    }

    //序号处理
    function sortTrNumber() {
        $('#SignFrame tbody>tr:not(:first)').each(function (index, obj) {
            $(obj).attr('id', 'SignItem' + (index + 1));
            $(obj).find('td').eq(0).find('div').html(index + 1);
            $(obj).find('td').eq(1).find('select').eq(0).attr('id', 'selHour' + (index + 1))
            $(obj).find('td').eq(1).find('select').eq(1).attr('id', 'selMin' + (index + 1))
            $(obj).find('td').eq(2).find('select').attr('id', 'isOpen' + (index + 1))
            $(obj).find('td').eq(3).find('input').attr('id', 'YuSuan' + (index + 1))
            $(obj).find('td').eq(4).find('select').attr('id', 'PaiMingShang' + (index + 1))
            $(obj).find('td').eq(5).find('select').attr('id', 'PaiMingXia' + (index + 1))
            $(obj).find('td').eq(6).find('a').attr('onclick', 'DeleteSignRow(' + (index + 1) + ')')
        })
    }
    function return_btn() {
        window.parent.location.reload();
    }
    $(function () {
        AddSignRow()
    })
</script>
</body>
</html>
